<template>
	<view :style="objColor">
		<!-- orderSub/pages/orderDetails/orderDetails.wxml -->
		<!-- <view class="box-detail">
      <capsule
        v-if="!showCustom"
        txtColor="#18181A"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></capsule>
      <navLod
        v-if="showCustom"
        txtColor="#18181A"
        bgColor="#FFFFFF"
        image="https://oos-cn.ctyunapi.cn/front-end/static/static/back.png"
        title="订单详情"
        :show_bol="false"
      ></navLod>
    </view> -->
		<image class="header-image" src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderBg.png"
			style="width: 100%"></image>

		<view class="detCon">


			<view class="demarcation">
				<view class="detTopCon">
					<view class="detTopName">订单已完成</view>
					<view class="detTopText">感谢使用，期待再次充电！</view>
				</view>
				<view class="orderInfoCon" :style="
            'padding-bottom: ' + (orderStatus == 2 ? '150rpx' : '150rpx') + ';'
          ">

					<view class="demCon infoCon">

						<view class="demCenter">
							<view class="demNum">
								<text class="symbol">￥</text>
								<!-- {{ det.actualBalance }} -->
								{{orderStatus == 2 ? det.arrears : det.actualBalance}}
							</view>
							<view class="demTitle">实付金额</view>
							<!-- <view class="demState">
                订单状态：
                <text
                  :style="
                    'color: ' +
                    (det.billTypeStr == '进行中'
                      ? '#606266'
                      : det.billTypeStr == '待支付'
                      ? '#FC724C'
                      : '#78C744') +
                    ';'
                  "
                >
                  {{ det.billTypeStr }}
                </text>
                <image
                  :src="
                    'https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/' +
                    (det.billTypeStr == '进行中'
                      ? 'close'
                      : det.billTypeStr == '待支付'
                      ? 'pay'
                      : 'finish') +
                    '.png'
                  "
                />
              </view> -->
						</view>


						<view class="demMoneyCon">

							<!-- 营销获客处理 适配h5 -->
							<view class="demMoneyList" v-if="det.finishedBillDetail.totalDiscountFee">
								<view class="demMoneyTitle">
									优惠金额
								</view>
								<view class="totalCon">
									<text class="demMoneyVal">
										-￥
										<text class="tc">{{ det.finishedBillDetail.totalDiscountFee }}</text>
									</text>
								</view>
							</view>
							<view class="demMoneyList"
								v-if="det.finishedBillDetail.deductibleBalance&&!det.chargeCardUsage">
								<view class="demMoneyTitle">
									奖励金抵扣
								</view>
								<view class="totalCon">
									<text class="demMoneyVal">
										-￥
										<text class="tc">{{ det.finishedBillDetail.deductibleBalance }}</text>
									</text>
								</view>
							</view>


							<!-- <view class="demMoneyList" v-if="det.totalDiscountBalance >0">
                <view class="demMoneyTitle">
                 优惠金额  
                </view>
                <view class="totalCon">
                  <text class="demMoneyVal">
                    -￥
                    <text class="tc">{{ det.totalDiscountBalance }}</text>
                  </text>
                </view>
              </view>
              <view class="demMoneyList" v-if="det.deductibleBalance >0">
                <view class="demMoneyTitle">
                  奖励金抵扣
                </view>
                <view class="totalCon">
                  <text class="demMoneyVal">
                    -￥
                    <text class="tc">{{ det.deductibleBalance }}</text>
                  </text>
                </view>
              </view> -->
							<view class="demMoneyList">
								<view class="demMoneyTitle">订单总金额</view>
								<view class="totalCon">
									<view class="demMoneyVal">
										￥
										<text class="tc">{{ det.busBalance }}</text>
									</view>
									<view class="totalDetailed">电费:¥{{ det.powerBalance }} | 服务费:¥{{
                      det.serviceBalance
                    }}</view>
								</view>
							</view>


							<!-- <van-collapse :value="activeNames" @change="onChange">
                                <van-collapse-item name="1"> -->

							<!-- <view slot="title">
                                        <view class="demMoneyTitle">优惠金额</view>
                                    </view>
                                    <view slot="value">
                                        <view class="demMoneyVal">
                                            -￥
                                            <text class="tc">{{ det.totalDiscountBalance }}</text>
                                        </view>
                                    </view> -->

							<!-- </van-collapse-item>
                            </van-collapse> -->
							<!-- <orderCollapse>
                <orderCollapseItem
                  title="优惠详情"
                  title-border="none"
                  :value="det.totalDiscountBalance"
                >
                
                </orderCollapseItem>
              </orderCollapse> -->

							<view v-if="showShrink">
								<view class="demMoneyList" v-if='!det.chargeCardUsage'>
									<view class="demMoneyTitle"
										v-if="det.memberDiscountBalance >0 || det.discountBalance >0 || det.cashCouponBalance > 0 || det.finishedBillDetail">
										优惠详情
									</view>
								</view>
								<view class="content" v-if="det.finishedBillDetail&&!det.chargeCardUsage">
									<view class="demMoneyMore">

										<!-- 营销获客处理 -->
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.freeServiceFee != '0.00'">
											<view>免服务费</view>
											<view class="money">
												-￥
												<text class="tc1">{{ det.finishedBillDetail.freeServiceFee }}</text>
											</view>
										</view>
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.memberDiscountFee != '0.00'">
											<view>
												会员折扣
												<text>(成长等级会员)</text>
											</view>
											<view class="money">
												-￥
												<text class="tc1">{{ det.finishedBillDetail.memberDiscountFee }}</text>
											</view>
										</view>
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.payMemberDiscountFee != '0.00'">
											<view>
												会员折扣
												<text>(付费会员)</text>
											</view>
											<view class="money">
												-￥
												<text
													class="tc1">{{ det.finishedBillDetail.payMemberDiscountFee }}</text>
											</view>
										</view>
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.activityDiscountFee != '0.00'">
											<view>
												优惠活动
												<text
													v-if="det.finishedBillDetail.activityDiscountType == 3">(单笔折扣)</text>
												<text
													v-if="det.finishedBillDetail.activityDiscountType == 4">(站点优惠)</text>
											</view>
											<view class="money">
												-￥
												<text
													class="tc1">{{ det.finishedBillDetail.activityDiscountFee }}</text>
											</view>
										</view>
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.couponDiscountFee != '0.00'">
											<view>优惠券抵扣</view>
											<view class="money">
												-￥
												<text class="tc1">{{ det.finishedBillDetail.couponDiscountFee }}</text>
											</view>
										</view>
										<view class="MoneyMoreList"
											v-if="det.finishedBillDetail.deductibleBalance != '0.00'">
											<view>奖励金抵扣</view>
											<view class="money">
												-￥
												<text class="tc1">{{ det.finishedBillDetail.deductibleBalance }}</text>
											</view>
										</view>

										<!-- <view class="MoneyMoreList" v-if="det.memberDiscountBalance >0">
                          <view>{{
                            det.payAccountStr == "个人"
                              ? "会员折扣(个人会员)"
                              : "会员折扣(车队会员)"
                          }}</view>
                          <view class="money">
                            -￥
                            <text class="tc1">{{
                              det.memberDiscountBalance
                            }}</text>
                          </view>
                        </view>
                        <view class="MoneyMoreList" v-if="det.ruleType != '1' && det.discountBalance >0">
                          <view
                            >优惠活动({{
                              det.ruleType == "2" ? "累计优惠" : "站点优惠"
                            }})</view
                          >
                          <view class="money">
                            -￥
                            <text class="tc1">{{ det.discountBalance }}</text>
                          </view>
                        </view>
                        <view
                          class="MoneyMoreList"
                          v-if="det.cashCouponBalance >0"
                        >
                          <view>{{ det.couponTypeStr }}</view>
                          <view class="money">
                            -￥
                            <text class="tc1">{{ det.cashCouponBalance }}</text>
                          </view>
                        </view> -->

									</view>
								</view>

								<view class="demMoneyList">
									<view class="demMoneyTitle">
										费用详情
									</view>
								</view>
								<view class="content">
									<view class="demMoneyMore">
										<view class="MoneyMoreList2">
											<view>{{det.payAccountStr== "个人"?'预付金额（个人钱包)':'预付金额（车队钱包)'}}</view>
											<view class="money">
												￥
												<text class="tc1">{{det.preFrozenAmount?det.preFrozenAmount:'0'}}</text>
											</view>
										</view>
										<view class="totalDetailed">{{ det.createTime }}</view>
										<view class="MoneyMoreList2">
											<view>{{det.payAccountStr== "个人"?'结算退回（个人钱包)':'结算退回（车队钱包)'}}</view>
											<view class="money">
												￥
												<text class="tc1">{{det.backAmount?det.backAmount:'0'}}</text>
											</view>
										</view>
										<view class="totalDetailed">{{ det.updateTime }}</view>
									</view>
								</view>

								<!-- 应付多笔账单 -->

								<!-- class="demMoneyList" -->



								<view v-if="det.billStatus == 13 || det.billPayLog.length > 1">
									<!--   <van-collapse :value="activeNames" @change="onChange" v-if="det.billStatus == 13 || det.billPayLog.length > 1">
                                  <van-collapse-item name="2"> -->
									<orderCollapse>
										<orderCollapseItem :title="orderStatus == 2 ? '应付金额' : '实付金额'"
											title-border="none"
											:value="orderStatus == 2 ? det.arrears : det.actualBalance">
											<view class="content">
												<!-- <view class="demMoneyVal">
                          ￥
                          <text class="tc">{{ det.actualBalance }}</text>
                        </view> -->

												<view v-for="(item, index) in det.billPayLog" :key="index">
													<view class="demMoneyMore" v-if="item.paidAmount">
														<view class="MoneyMoreList">
															<view>{{
                                det.memberType == 1
                                  ? "个人支付"
                                  : det.memberType == 2
                                  ? "车队支付"
                                  : "微信分支付"
                              }}</view>
															<view>
																<view class="money">
																	￥
																	<text class="tc">{{ item.paidAmount }}</text>
																</view>
																<view>{{ item.payTime }}</view>
															</view>
														</view>
													</view>
												</view>

											</view>
										</orderCollapseItem>
									</orderCollapse>


								</view>
								<!--    </van-collapse-item>
                              </van-collapse> -->
								<!-- <view class="demMoneyList" v-else>
                  <view class="demMoneyTitle">
                    {{ orderStatus == 2 ? "应付金额" : "实付金额" }}
                    <text
                      >({{
                        det.memberType == 1
                          ? "个人支付"
                          : det.memberType == 2
                          ? "车队支付"
                          : "微信分支付"
                      }})</text
                    >
                  </view>
                  <view class="totalCon">
                    <text class="demMoneyVal">
                      ￥
                      <text class="tc">{{ det.actualBalance }}</text>
                    </text>
                  </view>
                </view> -->



								<view class="demMoneyList" v-if="orderStatus == 1">
									<view class="demMoneyTitle">退款金额</view>
									<view class="totalCon">
										<text class="demMoneyVal">
											￥
											<text class="tc">{{
                        det.refundCoupon ? det.refundCoupon : 0
                      }}</text>
										</text>
									</view>
								</view>
							</view>

						</view>

						<view class="shrink" @tap="showShrinkButton">{{showShrink?'收起费用明细':'展开费用明细'}}
							<image
								:src="showShrink?'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png':'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'"
								class="turn"></image>
							<!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
						</view>

					</view>


					<!-- 订单信息 -->
					<view class="infoCon">
						<view class="demMoneyCon">
							<view class="demMoneyList">
								<view class="demMoneyTitle">订单编号</view>
								<view class="totalCon">
									<text class="order">{{ det.busShowNo }}</text>
									<text class="copyButton" @tap="copyOrder" :data-busId="det.busShowNo">复制</text>
								</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">充电站点</view>
								<view class="infoListVal">{{
                  det.stationName ? det.stationName : "--"
                }}</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">充电桩枪</view>
								<view class="infoListVal">{{ det.pileName ? det.pileName : "--"
                  }}</view>
								<!-- {{ det.gunName ? "-" + det.gunName : "" }} -->
							</view>
							<view class="infoList">
								<view class="infoListTitle">电桩编号</view>
								<view class="infoListVal">{{det.pileNumber}}</view>
								<!-- -{{det.gunNumber}} -->
							</view>
						</view>
					</view>

					<view class="infoCon">
						<view class="infoTop">
							<view class="gunName">充电信息</view>
							<view>

								<view class="status">{{
                  det.isSuper ? "超充" : det.chargeType == "man" ? "慢充" : "快充"
                }}</view>
								<view class="status">{{
                  det.pileCurrentMode==1 ? "交流" : "直流"
                }}</view>
							</view>
						</view>
						<view class="infoTimeline">
							<view class="infoTimeCon">
								<view class="infoTimeData">{{ det.timeS[0] }}</view>
								<view>
									<text class="infoTime">{{ det.timeS[1] }}</text>
									<!-- <text class="infoTimeData">起</text> -->
								</view>
							</view>
							<view>
								<view class="processCon">
									{{ det.difference }}
								</view>
								<view class="processReason">
									<!-- {{ det.endReasonStr ? det.endReasonStr : "" }} -->
									充电时长
								</view>
							</view>
							<view class="infoTimeCon">
								<view class="infoTimeData">{{ det.timeE[0] }}</view>
								<view>
									<text class="infoTime">{{ det.timeE[1] }}</text>
									<!-- <text class="infoTimeData">止</text> -->
								</view>
							</view>
						</view>

						<view class="OrderReason">
							<image src="https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderTip.png" class="turn">
							</image>{{ det.endReasonStr ? det.endReasonStr : "暂无停止充电原因" }}
						</view>

						<view v-if="showInfo">
							<view class="orderBottom"></view>
							<view class="infoList">
								<view class="infoListTitle">充电车辆</view>
								<view class="infoListVal">{{
                  det.plateNo ? det.plateNo : "--"
                }}</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">已充电量</view>
								<view class="infoListVal">{{ det.sumPower }}度</view>
							</view>
							<view class="infoList">
								<view class="infoListTitle">结束SOC</view>
								<view class="infoListVal">{{ det.endSoc ? det.endSoc : "0" }}%</view>
							</view>
						</view>

						<view class="shrink" @tap="InfoShrinkButton">{{showInfo?'收起充电信息':'展开充电信息'}}
							<image
								:src="showInfo?'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderUpper.png':'https://oos-cn.ctyunapi.cn/front-end/static/cartoon/orderLower.png'"
								class="turn"></image>
							<!--  <van-radio slot="right-icon" checked-color="#1487FA" :name="item.payType" /> -->
						</view>
					</view>

					<view class="orderClothes">
						如有疑问请联系<text class="orderClothesText" @tap="call">客服</text>
					</view>

					<!-- <view class="costCon">
            <view class="costTop">
              <view class="costName">费用详情</view>
            </view>
            <view> -->
					<!-- <uni-steps :options="steps" direction="column" :active="2"></uni-steps> -->
					<!-- <orderSteps
                :options="steps"
                direction="column"
                :active="2"
              ></orderSteps> -->
					<!-- <uni-steps :options="[{title:'买家下单',desc:'2018-11-11'},{title:'卖家发货',desc:'2018-11-12'},{title:'买家签收',desc:'2018-11-13'},{title:'交易完成',desc:'2018-11-14'}]" direction="column" :active="2"></uni-steps> -->
					<!-- <van-steps :steps="steps" :active="active" direction="vertical" active-color="#1487FA" desc-class="costDet"></van-steps> -->
					<!-- </view>
          </view> -->

					<view class="parkingRate" @tap="clickExplain" v-if="orderStatus == 2">
						<image class="img" src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/infor.png">
						</image>
						支付说明
					</view>
				</view>
			</view>
		</view>
		<!-- 支付说明 -->
		<view v-if="orderStatus == 2">
			<!-- <van-transition :show="explain" custom-class="block" name="slide-up"> -->
			<view class="explainTipsCon" v-if="explain">
				<view class="explainTipsImg">
					<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/close.png"
						@tap="clickExplain" />
				</view>
				<view class="explainTipsText">1、支付方式为个人账户/车队账户的，充值账户后系统将从目标账户中自动扣款。</view>
				<view class="explainTipsText">2、支付方式为微信支付分的，系统将从目标渠道自动扣款。</view>
			</view>
			<!-- </van-transition> -->

			<view class="paymentCon">
				<view @tap="goPay" :data-busId="det.busId">去支付</view>
			</view>
		</view>

		<view class="refundTipsCon" v-if="showRefundTips && orderStatus == 1" @tap="showRefundTipsFun">
			<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png" />
			退款成功，已退{{ det.refundCoupon ? det.refundCoupon : 0 }}元，已关闭
		</view>

		<view class="refundCon" v-if="showPaidTips && det.billStatus == 13" @tap="showPaidTipsFun">
			<image src="https://oos-cn.ctyunapi.cn/front-end/static/orderSub/images/refundClose.png" />
			待支付{{det.billPayLog[0].debt / 100}}元，已支付{{det.billPayLog[0].paidAmount }}
		</view>

		<view class="order_msg">
			<view class="order_btn" @tap="orderTop" :data-stationId="det.stationId">
				<!-- <text v-if="det.commentStatus == 0">评论</text>
        <text v-if="det.commentStatus == 1">查看评论</text> -->
				<text>再次充电</text>
			</view>
		</view>


		<uni-popup ref="showCustomerPup" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="呼叫" title="温馨提示" @confirm="callCustomer"
				@close="onCloseCustomer">
				<view>
					<view class="info">
						<view class="infoTitle">联系客服：</view><text
							class="infoValue">{{ serviceInfo.customerTelephone }}</text>
					</view>
					<view class="info">
						<view class="infoTitle">工作时间：</view>{{ serviceInfo.customerServiceTime }}
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	"use strict";
	import capsule from "../../../components/nav/nav";
import navLod from "../../../components/navLod/navLod";
import orderCollapseItem from "orderSub/components/orderCollapse/components/uni-collapse-item/uni-collapse-item.vue";
import orderCollapse from "orderSub/components/orderCollapse/components/uni-collapse/uni-collapse.vue";
	// import vanCollapse from '@vant/weapp/collapse/index';
	// import vanCollapseItem from '@vant/weapp/collapse-item/index';
	// import vanSteps from '@vant/weapp/steps/index';
	// import vanTransition from '@vant/weapp/transition/index';

	// exports.__esModule = true; // orderSub/pages/orderDetails/orderDetails.ts
	var app = getApp()
	var https_1 = require("./../../../api/https.js");

	var util_1 = require("./../../../utils/util.js");
	export default {
		components: {
			capsule,
			navLod,
			orderCollapseItem,
			orderCollapse,
			// vanCollapse,
			// vanCollapseItem,
			// vanSteps,
			// vanTransition
		},
		data() {
			return {
				marketingSwitch: app.globalData.marketingSwitch,
				explain: false,
				showRefundTips: true,
				showPaidTips: true,
				orderStatus: 3,

				det: {
					stationName: false,
					pileNumber: false,
					gunName: false,
					billTypeStr: "",
					busBalance: "",
					powerBalance: "",
					serviceBalance: "",
					totalDiscountBalance: "",
					payAccountStr: "",
					memberDiscountBalance: "",
					ruleType: "",
					discountBalance: "",
					deductibleBalance: "",
					cashCouponBalance: 0,
					couponTypeStr: "",
					billStatus: 0,
					billPayLog: [],
					arrears: '',
					actualBalance: "",
					memberType: 0,
					refundCoupon: false,
					busId: "",
					isSuper: false,
					chargeType: "",
					timeS: "",
					difference: "",
					endReasonStr: false,
					timeE: "",
					plateNo: false,
					sumPower: "",
					endSoc: false,

					finishedBillDetail: {
						totalDiscountFee: '',
						freeServiceFee: '',
						memberDiscountFee: '',
						payMemberDiscountFee: '',
						activityDiscountFee: '',
						activityDiscountType: 0,
						couponDiscountFee: '',
						deductibleBalance: ''
					},
				},

				activeNames: [],
				active: 2,
				steps: [],

				guns: [{
						value: 0,
						name: "A",
					},
					{
						value: 1,
						name: "B",
					},
					{
						value: 2,
						name: "C",
					},
					{
						value: 3,
						name: "D",
					},
					{
						value: 4,
						name: "E",
					},
					{
						value: 5,
						name: "F",
					},
					{
						value: 6,
						name: "G",
					},
					{
						value: 7,
						name: "H",
					},
					{
						value: 8,
						name: "I",
					},
					{
						value: 9,
						name: "J",
					},
					{
						value: 10,
						name: "K",
					},
					{
						value: 11,
						name: "L",
					},
					{
						value: 12,
						name: "M",
					},
					{
						value: 13,
						name: "N",
					},
					{
						value: 14,
						name: "O",
					},
					{
						value: 15,
						name: "P",
					},
					{
						value: 16,
						name: "Q",
					},
					{
						value: 17,
						name: "R",
					},
					{
						value: 18,
						name: "S",
					},
					{
						value: 19,
						name: "T",
					},
					{
						value: 20,
						name: "U",
					},
					{
						value: 21,
						name: "V",
					},
					{
						value: 22,
						name: "W",
					},
					{
						value: 23,
						name: "X",
					},
					{
						value: 24,
						name: "Y",
					},
					{
						value: 25,
						name: "Z",
					},
				],

				showCustom: "",
				widnowH: uni.getSystemInfoSync().screenHeight,
				bar_Height: uni.getSystemInfoSync().statusBarHeight,

				serviceInfo: {
					customerTelephone: '',
					customerServiceTime: ''
				},

				showShrink: false,
				showInfo: false
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// 1:进行中 2：待支付 3：已完成 4：已关闭
			if (options.type == 1) {} else if (options.type == 2) {
				this.orderStatus = 2;
			} else if (options.type == 3) {
				this.orderStatus = 3;
			} else if (options.type == 4) {
				this.orderStatus = 1;
			}

			this.getDetails(options.orderId);
			this.getRefundAmount()

			this.orderIds = options.orderId;
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getDetails(this.orderIds);
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		onPageScroll: function(e) {
			let height =
				this.widnowH <= 568 ? this.bar_Height + 40 : this.bar_Height + 45;
			if (e.scrollTop > height) {
				this.setData({
					showCustom: true,
				});
			} else {
				this.setData({
					showCustom: false,
				});
			}
		},
		methods: {
			//去评论
			orderTop: function(e) {
				console.log(e, "去评论....");
				// uni.navigateTo({
				//   url: `../orderMsg/orderMsg?busId=${e.currentTarget.dataset.busid}&id=${e.currentTarget.dataset.id}&commentstatus=${e.currentTarget.dataset.commentstatus}`,
				// });
				uni.navigateTo({
					url: '/homeSub/pages/siteDetail/siteDetail?stationId=' + e.currentTarget.dataset.stationid
				});
			},

			// //去支付
			// goPay: function (e) {
			//   uni.navigateTo({
			//     url:
			//       "../orderSettlement/orderSettlement?busId=" +
			//       e.currentTarget.dataset.busid,
			//   });
			// },

			//营销获客处理
			//去支付
			goPay: function(e) {
				if (!this.marketingSwitch) {
					uni.navigateTo({
						url: `../orderSettlement/orderSettlement?busId=${e.currentTarget.dataset.busid}`
					});
				} else {
					uni.navigateTo({
						url: `../orderSettlementYxhk/orderSettlement?busId=${e.currentTarget.dataset.busid}`
					});
				}
			},


			// 获取订单详情
			getDetails: function(id) {
				console.log(id, '订单id')
				var that = this;
				uni.showLoading({
					title: "加载中",
				});
				https_1
					.myBillDetails({
						id: id,
					})
					.then(function(res) {
						if (res.code == 0) {

							//   8081外包订单详情计算结果
							if (res.data.finishedBillDetail) {
								console.log('8081外包订单详情计算结果finishedBillDetail==>>>>', res.data.finishedBillDetail);
								res.data.finishedBillDetail.freeServiceFee = that.regFenToYuan(res.data
									.finishedBillDetail.freeServiceFee); //免服务费金额
								res.data.finishedBillDetail.totalDiscountFee = that.regFenToYuan(res.data
									.finishedBillDetail.totalDiscountFee); //总优惠金额
								res.data.finishedBillDetail.memberDiscountFee = that.regFenToYuan(res.data
									.finishedBillDetail.memberDiscountFee); //成长会员优惠金额
								res.data.finishedBillDetail.payMemberDiscountFee = that.regFenToYuan(res.data
									.finishedBillDetail.payMemberDiscountFee); //付费会员优惠金额
								res.data.finishedBillDetail.couponDiscountFee = that.regFenToYuan(res.data
									.finishedBillDetail.couponDiscountFee); //优惠券金额
								res.data.finishedBillDetail.deductibleBalance = that.regFenToYuan(res.data
									.finishedBillDetail.deductibleBalance); //奖励金金额
								res.data.finishedBillDetail.activityDiscountFee = that.regFenToYuan(res.data
									.finishedBillDetail.activityDiscountFee); //优惠活动优惠金额
							} else {
								console.log('8081外包订单详情计算结果为空finishedBillDetail==>>>>', res.data
									.finishedBillDetail);
								res.data.finishedBillDetail = that.det.finishedBillDetail
							}




							res.data.difference = that.getDateDiff(
								res.data.timeS,
								res.data.timeE
							);
							res.data.timeS = res.data.timeS.split(" ");
							res.data.timeE = res.data.timeE.split(" ");
							res.data.timeS[0] = res.data.timeS[0].split("-")[1] + '月' + res.data.timeS[0].split(
								"-")[2] + '日';
							res.data.timeE[0] = res.data.timeE[0].split("-")[1] + '月' + res.data.timeE[0].split(
								"-")[2] + '日';
							res.data.sumPower = (res.data.sumPower / 1000).toFixed(2); //已充电量

							res.data.arrears = that.regFenToYuan(res.data.arrears); //待支付
							res.data.actualBalance = that.regFenToYuan(res.data.actualBalance); //实收

							res.data.busBalance = that.regFenToYuan(res.data.busBalance); //订单金额

							res.data.powerBalance = that.regFenToYuan(res.data.powerBalance); //未折扣的电费

							res.data.serviceBalance = that.regFenToYuan(
								res.data.serviceBalance
							); //未折扣的服务费

							res.data.totalDiscountBalance = that.regFenToYuan(
								res.data.totalDiscountBalance
							); //优惠金额

							res.data.stationBalance = that.regFenToYuan(
								res.data.stationBalance
							); //站点优惠

							res.data.memberDiscountBalance = that.regFenToYuan(
								res.data.memberDiscountBalance
							); //会员折扣

							res.data.contractBalance = that.regFenToYuan(
								res.data.contractBalance
							); //合约优惠的金额

							res.data.deductibleBalance = that.regFenToYuan(
								res.data.deductibleBalance
							); //奖励金抵扣金额

							res.data.powerCoupon = that.regFenToYuan(res.data.powerCoupon); //电费券抵扣的金额

							res.data.refundCoupon = that.regFenToYuan(res.data.refundCoupon); //退款金额

							res.data.cashCouponBalance = that.regFenToYuan(
								res.data.cashCouponBalance
							); //卷

							res.data.discountBalance = that.regFenToYuan(
								res.data.discountBalance
							); //优惠活动金额

							if (!res.data.gunName) {
								res.data.gunName = that.guns[res.data.gunNumber].name;
							}

							if (res.data.billStatus == 13 || res.data.billPayLog) {
								res.data.bePaid = res.data.actualBalance;
								res.data.billPayLog.map(function(item) {
									if (item.paidAmount) {
										item.paidAmount = that.regFenToYuan(item.paidAmount);
									}

									res.data.bePaid = (res.data.bePaid - item.paidAmount).toFixed(
										4
									);
									return item;
								});
								res.data.paid = (
									res.data.actualBalance - res.data.bePaid
								).toFixed(4);
							}

							var str_1 = [];
							res.data.billTimeDetailList.map(function(item) {
								str_1.push({
									title: util_1.formatDateTime(item.startTime).split(" ")[1] +
										"-" +
										util_1.formatDateTime(item.endTime).split(" ")[1],
									desc: "电费：¥" +
										that.regFenToYuan(item.powerBlance) +
										"(¥" +
										that.regFenToYuan(item.powerPrice, true) +
										"/度)",
									desc2: "服务费：¥" +
										that.regFenToYuan(item.seviceBlance) +
										"(¥" +
										that.regFenToYuan(item.servicePrice, true) +
										"/度)",
									val: "充电" + (item.power / 1000).toFixed(3) + "度",
								});
							});
							console.log(res.data);
							(that.steps = str_1), (that.det = res.data);
						}

						that.det = res.data;

						uni.hideLoading();
					});
			},

			//计算时间差
			getDateDiff: function(startTime, endTime) {
				//将日期字符串转换为时间戳
				var sTime = Date.parse(startTime.replace(/-/g, "/")); //开始时间

				var eTime = Date.parse(endTime.replace(/-/g, "/")); //结束时间
				//作为除数的数字

				var divNumSecond = 1000;
				var divNumMinute = 1000 * 60;
				var divNumHour = 1000 * 3600;
				var divNumDay = 1000 * 3600 * 24;
				var day = parseInt((eTime - sTime) / parseInt(divNumDay));
				var hour = parseInt(
					((eTime - sTime) % parseInt(divNumDay)) / parseInt(divNumHour)
				);
				var minute = parseInt(
					parseInt(
						((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
					) / parseInt(divNumMinute)
				);
				var second =
					(parseInt(
							((eTime - sTime) % parseInt(divNumDay)) % parseInt(divNumHour)
						) %
						parseInt(divNumMinute)) /
					parseInt(divNumSecond);
				var time = day * 24 + hour;

				if (second < 10) {
					second = "0" + second;
				}

				if (minute < 10) {
					minute = "0" + minute;
				}

				if (time < 10) {
					time = "0" + time;
				}

				var str = time + ":" + minute + ":" + second;
				return str;
			},

			onChange: function(event) {
				this.activeNames = event.detail;
			},

			// 支付说明
			clickExplain: function() {
				this.explain = !this.explain;
			},

			// 退款提示框
			showRefundTipsFun: function() {
				this.showRefundTips = false;
			},

			showPaidTipsFun: function() {
				this.showPaidTips = false;
			},

			// 分转元
			regFenToYuan: function(fen, s) {
				var num = 0;

				if (!s) {
					num = (fen / 100).toFixed(2);
				} else {
					num = (fen / 10000).toFixed(2);
				}

				return num;
			},

			// 复制订单号
			copyOrder: function(e) {
				uni.setClipboardData({
					data: e.currentTarget.dataset.busid,
				});
			},

			//客服电话
			callCustomer: function() {
				this.$refs.showCustomerPup.close()
				uni.makePhoneCall({
					phoneNumber: this.serviceInfo.customerTelephone
				});
			},
			call: function() {
				this.$refs.showCustomerPup.open()
			},

			onCloseCustomer: function() {
				this.$refs.showCustomerPup.close()
			},

			getRefundAmount: function() {
				var that = this;
				https_1.refundAmount().then(function(res) {
					if (res.code == 0) {
						that.setData({
							serviceInfo: res.data
						});
					}
				});
			},

			showShrinkButton: function() {
				this.showShrink = !this.showShrink
			},
			InfoShrinkButton: function() {
				this.showInfo = !this.showInfo
			}
		},
	};
</script>
<style lang="less">
	@import "./orderDetails.less";
	/* orderSub/pages/orderDetails/orderDetails.wxss */

	page {
		background-color: #f4f6f8;
		height: 100vh;
		padding-bottom: 40rpx;
	}

	.header-image {
		position: absolute;
		top: 0;
		// #ifdef H5
		top: -65rpx;
		// #endif
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 556rpx;
	}

	.detCon {
		width: 100%;
		position: relative;
	}

	.detName {
		font-size: 34rpx;
		font-weight: bold;
		color: #18181a;
		margin: 15rpx 0 42rpx 32rpx;
	}

	.demarcation {
		margin: 0 10rpx;

		.demCon {
			margin: 10rpx 14rpx;
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			padding-bottom: 10rpx;

			.demTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.gunName {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					height: 25rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: var(--textColor);
				}
			}

			.demCenter {
				position: relative;
				// height: 200rpx;
				text-align: center;

				.demNum {
					font-size: 64rpx;
					font-weight: bold;
					margin: 55rpx 0 16rpx 0;
				}

				.demTitle {
					color: #606266;
					font-size: 26rpx;
				}

				.symbol {
					font-size: 40rpx;
					color: #000000;
				}

				.demState {
					color: #606266;
					font-size: 28rpx;
					font-weight: 400;
					height: 50rpx;
					line-height: 50rpx;

					image {
						height: 31rpx;
						width: 31rpx;
						vertical-align: text-bottom;
						margin-left: 10rpx;
					}
				}

			}
		}

		.infoCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 16rpx 14rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.infoTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 39rpx 32rpx 32rpx 34rpx;

				.gunName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}

				.status {
					color: #DB9132;
					text-align: center;
					line-height: 40rpx;
					width: 76rpx;
					height: 40rpx;
					background: rgba(233, 178, 108, 0.1608);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					opacity: 1;
					display: inline-block;
					font-size: 28rpx;
					font-family: PingFang SC;
					margin-left: 14rpx;

					// color: var(--textColor);
				}
			}

			.infoTimeline {
				text-align: center;
				display: flex;
				justify-content: space-between;
				padding: 42rpx 32rpx 0 32rpx;

				.infoTimeCon {
					display: inline-block;
					width: auto;
					text-align: left;
				}

				.infoTimeData {
					font-weight: 400;
					color: #909399;
					font-size: 26rpx;
					margin: 0 0 15rpx 0;
					text-align: center;
				}

				.infoTime {
					font-weight: bold;
					color: #303133;
					font-size: 34rpx;
					margin-top: 15rpx;
					margin-right: 10rpx;
				}

				.processCon {
					border: 1px solid var(--textColor);
					;
					border-radius: 24px;
					width: 160rpx;
					display: inline-block;
					font-size: 28rpx;
					font-weight: 500;
					color: var(--textColor);
					background: rgba(109, 177, 46, 0.102);
					position: relative;
					height: 48rpx;
					line-height: 48rpx;
					margin-top: 15rpx;

					&::after {
						content: "";
						border-top: 1px solid #909399;
						position: absolute;
						top: 1;
						width: 40rpx;
						height: 1rpx;
						left: -40rpx;
						top: 24rpx;
					}

					&::before {
						content: "";
						border-top: 1px solid #909399;
						position: absolute;
						top: 1;
						width: 40rpx;
						height: 1rpx;
						right: -40rpx;
						top: 24rpx;
					}
				}

				.processReason {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #606266;
					margin-top: 10rpx;
				}
			}

			.infoList {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 34rpx;

				.infoListTitle {
					font-size: 28rpx;
					font-weight: 400;
					color: #606266;
				}

				.infoListVal {
					font-size: 28rpx;
					font-weight: 500;
					color: #303133;
				}
			}
		}

		.costCon {
			background: linear-gradient(0deg, #ffffff, #f4f6f8);
			box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
			border: 2rpx solid #ffffff;
			margin: 10rpx 10rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;

			.van-steps {
				background: none;
			}

			.costTop {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #dcdfe6;
				padding: 40rpx 33rpx 32rpx 33rpx;

				.costName {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #18181a;
				}
			}

			.costDet {
				color: #606266;
				font-size: 26rpx;
				margin: 20rpx 20rpx;
			}
		}

		.demMoneyCon {
			>view {
				border: none !important;
				box-shadow: none;
			}

			>text {
				border: none !important;
				box-shadow: none;
			}

			padding: 10rpx 0 10rpx 0;

			.demMoneyTitle {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #606266;
			}

			.demMoneyVal {
				font-size: 28rpx;
				font-weight: 500;
				color: #fc724c;
			}

			.demMoneyList {
				padding: 25rpx 31rpx 20rpx 31rpx;
				line-height: 34rpx;
				display: flex;
				justify-content: space-between;

				.totalCon {
					text-align: right;

					.totalDetailed {
						margin-top: 20rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #909399;
						line-height: 34rpx;
						opacity: 0.9;
					}

					.order {
						font-size: 30rpx;
						font-weight: 500;
						color: #303133;
					}

					.copyButton {
						font-size: 28rpx;
						font-weight: 400;
						color: var(--textColor);
						display: inline-block;
						border-left: 1px solid #909399;
						padding: 0 0 0 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.demMoneyMore {
				background: #f5f7fa;
				padding: 40rpx 24rpx 10rpx 24rpx;
				margin: 0 32rpx 32rpx 32rpx;

				.MoneyMoreList {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;
					margin-bottom: 32rpx;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.MoneyMoreList2 {
					font-size: 26rpx;
					color: #303133;
					display: flex;
					justify-content: space-between;

					.MoneyMoreVal {
						color: #606266;
					}
				}

				.totalDetailed {
					text-align: right;
					margin: 9rpx 0 29rpx 0;
					font-size: 26rpx;
					font-weight: 400;
					color: #909399;
					line-height: 34rpx;
					opacity: 0.9;
				}
			}
		}

		.van-cell:after {
			display: none !important;
		}

		.van-collapse-item__content {
			padding-top: 0px;
		}
	}

	.refundTipsCon {
		width: 100%;
		background: #595c69;
		opacity: 0.6;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		position: fixed;
		bottom: 0;
		font-size: 28rpx;
		font-weight: 500;

		image {
			height: 32rpx;
			width: 32rpx;
			vertical-align: middle;
			margin: 0 20rpx;
		}
	}

	.refundCon {
		width: 100%;
		background: #595c69;
		opacity: 0.6;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		position: fixed;
		bottom: 130rpx;
		font-size: 28rpx;
		font-weight: 500;

		image {
			height: 32rpx;
			width: 32rpx;
			vertical-align: middle;
			margin: 0 20rpx;
		}
	}

	.explainTipsCon {
		z-index: 2;
		display: inline;
		width: 702rpx;
		background: #303133;
		opacity: 0.8;
		padding: 20rpx 0;
		color: #ffffff;
		position: fixed;
		bottom: 150rpx;
		font-size: 28rpx;
		font-weight: 500;
		margin: 0 24rpx;
		border-radius: 10rpx;

		.explainTipsImg {
			text-align: right;

			image {
				height: 32rpx;
				width: 32rpx;
				vertical-align: middle;
				margin: 0 20rpx;
			}
		}

		.explainTipsText {
			margin: 33rpx;
			font-size: 26rpx;
			letter-spacing: 2rpx;
			line-height: 42rpx;
		}
	}

	.parkingRate {
		color: #606266;
		font-size: 24rpx;
		padding: 5rpx 40rpx 22rpx 40rpx;

		.img {
			width: 25rpx;
			height: 25rpx;
			vertical-align: middle;
			margin-right: 15rpx;
		}
	}

	.paymentCon {
		height: 120rpx;
		line-height: 120rpx;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		background: linear-gradient(0deg, #ffffff, #f4f6f8);
		border: 2px solid rgba(255, 255, 255, 0.55);
		box-shadow: 0px -25px 67px 0px rgba(177, 182, 190, 0.2);
		text-align: center;
		z-index: 999;

		view {
			height: 88rpx;
			background: var(--btnColor);
			box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
			border-radius: 44rpx;
			text-align: center;
			line-height: 88rpx;
			font-weight: bold;
			color: #ffffff;
			font-size: 30rpx;
			display: inline-block;
			width: 680rpx;
		}
	}

	.money {
		color: #606266;
		font-size: 26rpx;
		text-align: right;
		font-weight: 500;
	}

	.tc {
		font-size: 34rpx;
		font-weight: bold;
	}

	.tc1 {
		font-size: 28rpx;
		font-weight: bold;
	}


	.detTopCon {
		margin: 0rpx 32rpx;
		color: #FFFFFF;
		font-weight: 400;
		font-weight: 400;
	}

	.detTopName {
		font-size: 36rpx;
		padding-top: 64rpx;

	}

	.detTopText {
		font-size: 24rpx;
		margin: 24rpx 0 41rpx 0;
	}

	.shrink {
		font-size: 24rpx;
		font-weight: 400;
		color: var(--btnColor);
		line-height: 34rpx;
		text-align: center;
		margin-bottom: 32rpx;

		.turn {
			width: 25rpx;
			height: 12rpx;
			margin-left: 16rpx;
		}
	}

	.OrderReason {
		margin: 42rpx 32rpx 0 32rpx;
		font-weight: 400;
		color: #FC724C;
		font-size: 24rpx;
		border-radius: 0px 0px 0px 0px;
		opacity: 1;
		padding-bottom: 40rpx;

		.turn {
			width: 24rpx;
			height: 24rpx;
			margin-right: 8rpx;
			vertical-align: middle;
		}
	}

	.orderClothes {
		font-weight: 400;
		color: #606266;
		font-size: 24rpx;
		text-align: center;
		margin: 40rpx 0;

		.orderClothesText {
			color: var(--btnColor);
		}
	}

	.orderBottom {
		border-top: 1rpx solid #DCDFE6;
		margin: 0rpx 32rpx;
	}
</style>